import { useState, useEffect, useRef } from 'react';
function PicValidate(props) {
  const { width, height } = props;
  const initialOptions = {
    // actually invalid in development but maybe useful in future
    canvasId: 'verifyCanvas',
    width: '100',
    height: '40',
    // blend (数字字母混合)
    // number:（纯数字）
    // letter 纯字母
    type: 'blend',
    code: '',
  };
  // no need to save data in states
  // const [initialOptions, setOptions] = useState(initialOption);
  if (Object.prototype.toString.call(props) === '[object Object]') {
    for (let i in props) {
      initialOptions[i] = props[i];
    }
  }
  initialOptions.numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  initialOptions.letterArr = getAllLetters();
  const canvasItem = useRef();
  useEffect(() => {
    refreshIt(initialOptions, canvasItem);
  }, [width]);
  return (
    <canvas
      ref={canvasItem}
      width={width}
      height={height}
      style={{ cursor: 'pointer' }}
      onClick={() => {
        refreshIt(initialOptions, canvasItem);
      }}
    >
      您的浏览器版本不支持使用canvas
    </canvas>
  );
}
const refreshIt = (options, canvasItem) => {
  options.code = '';
  let canvas = canvasItem.current;
  let ctx;
  let txtArr;
  if (canvas && canvas.getContext) {
    ctx = canvas.getContext('2d');
  } else {
    return;
  }
  ctx.textBaseline = 'middle';
  // 样式设置
  //   ctx.fillStyle = randomColor(180, 240);
  ctx.fillStyle = randomColor(255, 255);
  ctx.fillRect(0, 0, options.width, options.height);
  // 设置验证码对应数组范围 range
  if (options.type === 'blend') {
    txtArr = options.numArr.concat(options.letterArr);
  } else if (options.type === 'number') {
    txtArr = options.numArr;
  } else {
    txtArr = options.letterArr;
  }
  // 绘制页面主要内容及整体样式
  for (let i = 0; i < 4; i++) {
    let txt = txtArr[randomNum(0, txtArr.length)];
    options.code += txt;
    ctx.font = randomNum(options.height / 2, options.height) + 'px SimHei';
    ctx.fillStyle = randomColor(50, 160); // 随机生成字体颜色
    ctx.shadowOffsetX = randomNum(-2, 2);
    ctx.shadowOffsetY = randomNum(-2, 2);
    ctx.shadowBlur = randomNum(-2, 2);
    ctx.shadowColor = 'rgba(0,0,0,0.3)';
    let x = (options.width / 6) * (i + 1);
    let y = options.height / 2;
    let deg = randomNum(-30, 30);
    // 设置旋转的角度及坐标原点
    ctx.translate(x, y);
    ctx.rotate((deg * Math.PI) / 180);
    ctx.fillText(txt, 0, 0);
    // 恢复旋转角度和坐标原点
    ctx.rotate((-deg * Math.PI) / 180);
    ctx.translate(-x, -y);
  }
  // 绘制干扰线
  for (let i = 0; i < 4; i++) {
    ctx.strokeStyle = randomColor(40, 180);
    ctx.beginPath();
    ctx.moveTo(randomNum(0, options.width), randomNum(0, options.height));
    ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
    ctx.stroke();
  }
  //   // 绘制干扰点
  for (let i = 0; i < options.width / 4; i++) {
    ctx.fillStyle = randomColor(0, 255);
    ctx.beginPath();
    ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
    ctx.fill();
  }
  if (options.callback) {
    options.callback(options.code.toLowerCase());
  }
};
const getAllLetters = function () {
  //   let letterStr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z';
  let letterStr = 'A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z';
  return letterStr.split(',');
};
const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};
const randomColor = (min, max) => {
  let r = randomNum(min, max);
  let g = randomNum(min, max);
  let b = randomNum(min, max);
  return `rgb(${r},${g},${b})`;
};
function Randoms(props) {
  const { callback } = props;
  const divRef = useRef();
  useEffect(() => {
    setOffSet([divRef.current.offsetWidth, divRef.current.offsetHeight]);
  }, []);
  const [offset, setOffSet] = useState([0, 0]);
  return (
    <div ref={divRef}>
      <PicValidate
        type="blend"
        width={offset[0] || '100'}
        height={offset[1] || '40'}
        callback={callback}
      />
    </div>
  );
}
export default Randoms;
